<template>
    <view>
        <button @click="refreshTableData">刷新数据</button>
        <uni-table :border="true" :stripe="true" :loading="loading" class="my-table" type="selection" @selection-change="selectionChange">
            <uni-tr>
                <!-- <uni-th v-for="column in columns" :key="column.field">{{ column.title }}</uni-th> -->
                <uni-th :sortable="true" @sort-change="sortChange" width="100">日期</uni-th>
                <uni-th width="100">姓名</uni-th>
                <uni-th @filter-change="filterChange" filter-type="select" :filter-data="filterData" width="100">地址</uni-th>
            </uni-tr>
            <uni-tr v-for="(item, index) in tableData" :key="index">
                <uni-td v-for="column in columns" :key="column.field">
                    <text>{{item[column.field]}}</text>
                </uni-td>
            </uni-tr>
        </uni-table>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                tableData: [],
                columns: [{
                    field: 'date',
                    title: '日期'
                }, {
                    field: 'name',
                    title: '姓名'
                }, {
                    field: 'address',
                    title: '地址'
                }],
                filterData: [{
                    text: 'aaa',
                    value: 1
                }, {
                    text: 'bbb',
                    value: 2
                }]
            }
        },
        methods: {
            refreshTableData() {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                }, 2000)
                let list = []
                for (let i = 0; i < 10; i++) {
                    list.push({
                        date: i,
                        name: "zhangsan",
                        address: "上东士大夫逻辑士大夫"
                    })
                }
                this.tableData = list
            },
            sortChange(obj) {
                console.log('sort-change', obj)
            },
            filterChange(obj) {
                console.log('filter-change', obj)
            },
            selectionChange(obj) {
                console.log("selection-change", obj);
            }
        }
    }
</script>

<style>

</style>